<template>
  <div class="home">
    <search-bar/>
    <div class="first">
      <count-card
          class="count-card"
          v-for="(item, index) in countData"
          :key="index"
          :title="item.title"
          :count="item.count"
          :is-money="item.isMoney"
          :unit="item.unit"
      />
    </div>
    <div class="second">
      <overall-card class="overall"/>
      <household-card class="household"/>
      <international-card class="international"/>
    </div>
    <div class="third">
      <evolution-card class="evolution"/>
      <analysis-card class="analysis"/>
    </div>
  </div>
</template>

<script>
import SearchBar from './SearchBar.vue'
import CountCard from './CountCard.vue'
import OverallCard from '@/components/card/OverallCard.vue'
import HouseholdCard from '@/components/card/HouseholdCard.vue'
import InternationalCard from '@/components/card/InternationalCard.vue'
import EvolutionCard from '@/components/card/EvolutionCard.vue'
import AnalysisCard from '@/components/card/AnalysisCard.vue'

export default {
  components: {
    SearchBar,
    CountCard,
    OverallCard,
    HouseholdCard,
    InternationalCard,
    EvolutionCard,
    AnalysisCard
  },
  name: 'home',
  data () {
    return {
      countData: [
        { title: '总户数', count: 126560, isMoney: false, unit: '户' },
        { title: '总资产', count: 896560, isMoney: true, unit: '万元' },
        { title: '总负债', count: 126560, isMoney: true, unit: '万元' },
        { title: '净资产', count: 669560, isMoney: true, unit: '万元' },
        { title: '营业收入', count: 126560, isMoney: true, unit: '万元' },
        { title: '净利润', count: 126560, isMoney: true, unit: '万元' },
      ],
    }
  },
  methods: {
    handlerSelect (route) {
      this.$router.push({ name: 'admin.home' })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  .first {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .count-card {
      flex: 1;

      &:not(:nth-child(1)) {
        margin-left: 20px;
      }
    }
  }

  .second {
    display: flex;
    margin-top: 20px;
    height: 382px;

    .overall {
      width: 40%;
    }

    .household {
      width: 40%;
      margin-left: 20px;
    }

    .international {
      margin-left: 20px;
      flex: 1;
    }
  }

  .third {
    display: flex;
    margin-top: 20px;
    height: 523px;

    .evolution {
      width: 55%;
    }

    .analysis {
      margin-left: 20px;
      width: 45%;
    }
  }
}
</style>
